<template>
  <div class="app-container">
    <el-form :model="form" ref="queryRef" :inline="true" class="formBox" label-width="120px">
      <el-row class="rowStyle">
        <el-col :span="22" class="colStyle">
          <h1 class="titleBox">{{ form.kpTaskName }}</h1>
          <el-icon color="#409EFC" class="iconStyle" @click="handleDialog">
            <Switch />
          </el-icon>
        </el-col>
      </el-row>
      <el-table :data="form.dataList" border class="borderTable">
        <el-table-column label="序号" align="center" type="index" width="70" />
        <el-table-column label="省" align="center">
          <template #default="scope">
            {{ scope.row.provinceName }}
          </template>
        </el-table-column>
        <el-table-column label="考评得分" sortable :sort-by="['score']" align="center">
          <template #default="scope">
            {{ scope.row.score }}
          </template>
        </el-table-column>
        <el-table-column label="分项得分" align="center">
          <el-table-column :label="v.name" sortable :sort-by="['lastScore']" align="center"
            v-for="(v, i) in form.titleList" :key="i">
            <template #default="scope">
              <span v-for="(x, y) in scope.row.index2ScoreList" :key="y">
                <span v-if="!isShow">
                  <span v-if="v.id == x.kesdi2Id">
                    {{ x.lastScore }}
                  </span>
                </span>
                <el-form-item v-if="isShow">
                  <el-input v-model="x.lastScore" placeholder="请输入"></el-input>
                </el-form-item>
              </span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-form>
    <el-dialog title="选择考评结果" v-model="dialogOpen" width="800px" append-to-body>
      <el-form class="formStyle" :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
        <el-row>
          <el-col :span="18">
            <el-form-item label="考评结果：" prop="provinceId">
              <el-select v-model="queryParams.name" placeholder="请选择考评结果" filterable clearable style="width: 400px">
                <el-option v-for="item in rankingView" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  previewRanking,
  taskList,
} from "@/api/workEvaluation/appraisalTaskManagement/appraisalTaskManage.js";
import { onMounted, reactive, toRef } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const krtId = ref("");
const dialogOpen = ref(false);
const data = reactive({
  form: {
    kpTaskName: "",
    dataList: [],
    titleList: [],
  },
  rankingView: [],
  isShow: false,
  queryParams: {},
});
const { form, isShow, rankingView, queryParams } = toRefs(data);
const getData = (val) => {
  previewRanking({ krtId: val }).then((res) => {
    isShow.value = res.data.show;
    form.value.kpTaskName = res.data.kpTaskName;
    form.value.titleList = res.data.titleList;
    form.value.dataList = res.data.dataList;
  });
};
const getList = () => {
  taskList().then((res) => {
    krtId.value = res.data[0].id;
    rankingView.value = res.data;
    getData(krtId.value);
  });
};
// 点击icon 打开模态框
const handleDialog = () => {
  dialogOpen.value = true;
};
// 选择考评结果确定
const handleSubmit = () => {
  dialogOpen.value = false;
  getData(queryParams.value.name);
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.formBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rowStyle {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.colStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.iconStyle {
  font-size: 24px;
  margin: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.formStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.btnBox {
  width: 90%;
  text-align: center;
}
</style>
